<script setup>
/**
 * name：
 * user：sa0ChunLuyu
 * date：2022年7月12日 上午11:07:11
 */
import $router from '~/router'
import {onBeforeRouteUpdate} from "vue-router";
import {
  updateAdminStatusAction,
  updateAdminAuthIdAction,
  updateAdminPasswordAction,
  updateAdminNicknameAction,
  getAdminListAction,
  deleteAdminAction,
  createAdminAction,
  getAdminAuthSelectListAction,
  getAdminInfoAction,
  $response
} from '~/api'

const default_page_options = {
  status: 0,
  search: '',
  page: 1
}
const page_options = ref(JSON.parse(JSON.stringify(default_page_options)))
onBeforeRouteUpdate((to) => {
  routerChange(to.query)
})

const routerChange = (query) => {
  page_options.value = {
    status: Number(query.status) || default_page_options.status,
    search: query.search || default_page_options.search,
    page: Number(query.page) || default_page_options.page,
  }
  getAdminList()
}
const admin_list = ref([])
const page_count = ref(0)
const getAdminList = async () => {
  const response = await getAdminListAction(page_options.value, page_options.value.page)
  $response(response, () => {
    admin_list.value = response.data.data
    page_count.value = response.data.last_page
  })
}

onMounted(() => {
  routerChange($router.currentRoute.value.query)
  getAdminAuthSelectList()
})
const pagePush = () => {
  $router.push({
    name: 'admin-list',
    query: page_options.value
  })
}
const searchClick = () => {
  updatePage(1)
}
const clearSearchClick = () => {
  page_options.value.search = ''
  searchClick()
}

const updatePage = (page) => {
  page_options.value.page = page
  pagePush()
}
const auth_options = ref([])
const getAdminAuthSelectList = async () => {
  const response = await getAdminAuthSelectListAction()
  $response(response, () => {
    auth_options.value = response.data.list.map((item) => {
      return {
        label: item.name,
        value: item.id,
        disabled: item.del === 1
      }
    })
    auth_options.value.unshift({
      label: '暂不分配',
      value: 0,
    })
    auth_options.value.unshift({
      label: '最高权限',
      value: -1,
      disabled: true
    })
  })
}
const admin_info = ref({
  info: {
    id: 0,
    nickname: '',
    admin_auth_id: 0,
    status: 1
  },
  account: {
    id: 0,
    account: '',
    password: ''
  }
})
const adminItemClick = async (id) => {
  const response = await getAdminInfoAction(id)
  $response(response, () => {
    admin_info.value = {
      info: {
        id: response.data.info.id,
        nickname: response.data.info.nickname,
        admin_auth_id: response.data.info.admin_auth_id,
        status: response.data.info.status === 1
      },
      account: {
        id: response.data.account.id,
        account: response.data.account.account,
        password: ''
      }
    }
    edit_active.value = true
  })
}
const updateAdminNickname = async () => {
  const response = await updateAdminNicknameAction({
    id: admin_info.value.info.id,
    nickname: admin_info.value.info.nickname,
  })
  $response(response, () => {
    editClose()
    window.$message().success(response.message)
  })
}
const updateAdminAuthId = async () => {
  const response = await updateAdminAuthIdAction({
    id: admin_info.value.info.id,
    admin_auth_id: admin_info.value.info.admin_auth_id,
  })
  $response(response, () => {
    editClose()
    window.$message().success(response.message)
  })
}
const updateAdminPassword = async () => {
  const response = await updateAdminPasswordAction({
    id: admin_info.value.account.id,
    password: admin_info.value.account.password,
  })
  $response(response, () => {
    editClose()
    window.$message().success(response.message)
  })
}
const updateAdminStatus = async () => {
  const response = await updateAdminStatusAction({
    id: admin_info.value.info.id,
    status: admin_info.value.info.status ? 1 : 2,
  })
  $response(response, () => {
    editClose()
    window.$message().success(response.message)
  })
}
const edit_active = ref(false)
const saveClick = async () => {
  const response = await createAdminAction({
    nickname: admin_info.value.info.nickname,
    account: admin_info.value.account.account,
    password: admin_info.value.account.password,
    admin_auth_id: admin_info.value.info.admin_auth_id,
  })
  $response(response, () => {
    editClose()
    window.$message().success(response.message)
  })
}
const createAdminClick = () => {
  admin_info.value = {
    info: {
      id: 0,
      nickname: '',
      admin_auth_id: 0,
      status: true
    },
    account: {
      id: 0,
      account: '',
      password: ''
    }
  }
  edit_active.value = true
}
const editClose = () => {
  edit_active.value = false
  admin_info.value = {
    info: {
      id: 0,
      nickname: '',
      admin_auth_id: 0,
      status: true
    },
    account: {
      id: 0,
      account: '',
      password: ''
    }
  }
  getAdminList()
}
const statusChange = (status) => {
  page_options.value.status = status
  searchClick()
}
const deleteClick = () => {
  const $dialog = window.$dialog.warning({
    title: '确认删除该人员？',
    positiveText: '确定',
    negativeText: '取消',
    onPositiveClick: async () => {
      $dialog.destroy()
      const response = await deleteAdminAction([admin_info.value.info.id])
      $response(response, () => {
        editClose()
        window.$message().success(response.message)
      })
    },
    onNegativeClick: () => {
    }
  })
}
</script>
<template>
  <div>
    <n-drawer v-model:show="edit_active" :width="500" placement="right">
      <n-drawer-content :title="`${admin_info.info.id === 0 ?'添加':'编辑'}人员`">
        <div>
          <div>
            <n-space align="center">
              <div>
                <n-tag>账号</n-tag>
              </div>
              <div>
                <n-input class="info_input_wrapper" :disabled="admin_info.info.id!==0"
                         v-model:value="admin_info.account.account"></n-input>
              </div>
            </n-space>
          </div>
          <div mt-2>
            <n-space align="center">
              <div>
                <n-tag>昵称</n-tag>
              </div>
              <div>
                <n-input class="info_input_wrapper" v-model:value="admin_info.info.nickname"></n-input>
              </div>
              <div v-if="admin_info.info.id!==0">
                <n-button @click="updateAdminNickname()" type="primary">修改昵称</n-button>
              </div>
            </n-space>
          </div>
          <div mt-2>
            <n-space align="center">
              <div>
                <n-tag>密码</n-tag>
              </div>
              <div>
                <n-input class="info_input_wrapper" v-model:value="admin_info.account.password"></n-input>
              </div>
              <div v-if="admin_info.info.id!==0">
                <n-button @click="updateAdminPassword()" type="primary">修改密码</n-button>
              </div>
            </n-space>
          </div>
          <div mt-2>
            <n-space align="center">
              <div>
                <n-tag>权限</n-tag>
              </div>
              <div>
                <n-select class="info_input_wrapper" v-model:value="admin_info.info.admin_auth_id"
                          :options="auth_options"/>
              </div>
              <div v-if="admin_info.info.id!==0">
                <n-button @click="updateAdminAuthId()" type="primary">修改权限</n-button>
              </div>
            </n-space>
          </div>
          <div v-if="admin_info.info.id!==0" mt-2>
            <n-space align="center">
              <div>
                <n-tag>状态</n-tag>
              </div>
              <div class="info_input_wrapper">
                <n-switch :round="false" v-model:value="admin_info.info.status"/>
              </div>
              <div>
                <n-button @click="updateAdminStatus()" type="primary">修改状态</n-button>
              </div>
            </n-space>
          </div>
          <div mt-2>
            <n-button v-if="admin_info.info.id===0" @click="saveClick()" type="primary">保存</n-button>
            <n-button v-if="admin_info.info.id!==0" @click="deleteClick()" type="error">删除</n-button>
          </div>
        </div>
      </n-drawer-content>
    </n-drawer>
    <n-card title="人员管理">
      <div>
        <div>
          <n-space align="center">
            <div>
              <n-tag>状态</n-tag>
            </div>
            <div>
              <n-button @click="statusChange(0)" :type="page_options.status===0?'primary':'default'" size="small">全部
              </n-button>
              <n-button @click="statusChange(1)" ml-2 :type="page_options.status===1?'primary':'default'" size="small">
                可用
              </n-button>
              <n-button @click="statusChange(2)" ml-2 :type="page_options.status===2?'primary':'default'" size="small">
                禁用
              </n-button>
            </div>
          </n-space>
        </div>
        <div mt-1>
          <n-space justify="space-between">
            <div>
              <n-space align="center">
                <div>
                  <n-tag>搜索</n-tag>
                </div>
                <div>
                  <n-input size="small" v-model:value="page_options.search" placeholder="请输入昵称"></n-input>
                </div>
                <n-button @click="searchClick()" type="primary" size="small">搜索</n-button>
                <n-button @click="clearSearchClick()" size="small">清空</n-button>
              </n-space>
            </div>
            <div>
              <n-button @click="createAdminClick()" size="small" type="primary">创建新人员</n-button>
            </div>
          </n-space>
        </div>
      </div>
      <n-table mt-2 :single-line="false">
        <thead>
        <tr>
          <th>编号</th>
          <th>账号</th>
          <th>昵称</th>
          <th>状态</th>
        </tr>
        </thead>
        <tbody>
        <tr @click="adminItemClick(i.id)" cursor-pointer v-for="(i,k) in admin_list" :key="k">
          <td>{{ i.id }}</td>
          <td>{{ i.account }}</td>
          <td>{{ i.nickname }}</td>
          <td>
            <n-tag :type="i.status===1?'success':'warning'">
              {{ i.status === 1 ? '可用' : '禁用' }}
            </n-tag>
          </td>
        </tr>
        </tbody>
      </n-table>
      <n-pagination v-if="page_count>1" @update:page="updatePage" mt-2 v-model:page="page_options.page"
                    :page-count="page_count"/>
    </n-card>
  </div>
</template>
<style scoped>
.info_input_wrapper {
  width: 200px;
}
</style>
<route>
{"meta":{"title":"人员管理","icon":"i-ic-baseline-account-box"}}
</route>

